<template>
  <!-- 配送管理-配送邀请 -->
  <div class="distribute-invite">
    <el-row style="height:100%;">
      <el-col :span="8">
        <el-header
          class="info-header"
          height="46px">医院联系人信息</el-header>
        <el-main class="info-main">
          <el-row
            class="row-split"
            v-for="(item,index) in inviteInfo"
            :key="index">
            <el-col :span="6">{{ item.label }}</el-col>
            <el-col
              :span="18"
              v-if="item.prop !== 'notice'">{{ inviteInfoData[item.prop] || "~~" }}</el-col>
            <el-col
              :span="18"
              v-else>
              <span
                @click.stop="showNoticeBook"
                class="look-notice">查看</span>
            </el-col>
          </el-row>
        </el-main>
      </el-col>
      <el-col
        :span="16"
        style="height:100%;">
        <div class="invite-path">
          <div class="input-corver">
            <el-input
              id="copyInput"
              v-model="invitationLink"
              disabled />
            <el-button
              type="primary"
              class="copy-btn"
              v-clipboard:copy="invitationLink"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >
              <i class="el-icon-document-copy"/>
              复制链接</el-button>
          </div>
          <p class="invite-path-info">复制配送邀请链接给供应商邀请他们加入</p>
        </div>
      </el-col>
    </el-row>
    <!-- 配送邀请修改弹窗 -->
    <el-dialog
      title="配送邀请修改"
      width="400px"
      class="dialog-box"
      :visible.sync="dialogVisible">
      <el-form
        ref="infoForm"
        :inline="true"
        :model="info.infoFormData"
        :rules="info.infoFormRules"
        class="form-box"
        label-width="80px"
      >
        <el-form-item
          label="姓名"
          prop="name">
          <el-input
            class="input-limit"
            v-model="info.infoFormData.name" />
        </el-form-item>
        <el-form-item
          label="部门"
          prop="department">
          <el-input
            class="input-limit"
            v-model="info.infoFormData.department" />
        </el-form-item>
        <el-form-item
          label="电话"
          prop="phone">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            class="input-limit"
            maxlength="11"
            v-model="info.infoFormData.phone" />
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark">
          <el-input
            class="input-limit textarea-limit"
            type="textarea"
            v-model="info.infoFormData.remark"
          />
        </el-form-item>
        <el-form-item
          label="通知书"
          prop="noticeUrl">
          <el-upload
            class="avatar-uploader"
            action="string"
            :show-file-list="false"
            :disabled="load.isImgLoading"
            :before-upload="beforeUpload"
            :accept="load.uploadAccept"
            :http-request="handleUpload"
          >
            <div
              class="pdf-corver"
              v-if="info.infoFormData.noticeUrl">
              <i class="iconfont iconpdf pdf-logo"/>
              <p>上传</p>
            </div>
            <p
              class="p-warning"
              v-else>修改</p>
          </el-upload>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click.stop="dialogVisible = false">
          <i class="el-icon-circle-close"/>
          取 消</el-button>
        <el-button
          type="primary"
          @click.stop="dialogSubmit">
          <i class="el-icon-circle-check"/>
          确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { inviteInfo, inviteInfoRules } from './const.js'
import { fileUpload } from '@const/beforeSettleApi'
import {
  findHospitalContact,
  updateHospitalContact
} from '@const/beforeSettleApi.js'
import { hasIn, cloneDeep } from 'lodash'
export default {
  name: 'DistributeInvite',
  data () {
    return {
      invitationLink: '',
      load: {
        uploadAccept: '.pdf',
        uploadApi: fileUpload,
        isImgLoading: false
      },
      inviteInfo,
      // 页面显示的静态数据
      inviteInfoData: {},
      dialogVisible: false,
      info: {
        // 修改按钮后->表单内容
        infoFormData: {},
        infoFormRules: inviteInfoRules
      }
    }
  },
  methods: {
    // 复制链接
    onCopy () {
      this.$message({ type: 'success', message: '链接已复制到剪贴板' })
    },
    onError () {
      this.$message({ type: 'error', message: '链接复制失败！' })
    },
    showNoticeBook () {
      if (this.inviteInfoData.noticeUrl) {
        // TODO 查看通知书
        this.$pdfViewer({ url: this.inviteInfoData.noticeUrl, title: '通知书' })
      } else {
        this.$message({ type: 'warning', message: '暂时还没有上传通知书哦！' })
      }
    },
    getInfoDetail () {
      this.$axios({
        method: 'get',
        url: findHospitalContact
      })
        .then(res => {
          let obj = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.inviteInfoData = cloneDeep(obj)
          this.info.infoFormData = cloneDeep(obj)
          this.invitationLink = obj.invitationLink
        })
        .catch(() => {})
    },
    editInfo () {
      this.dialogVisible = true
      this.getInfoDetail()
    },
    // 修改联系人信息
    editHospitalInfo () {
      this.$axios({
        method: 'put',
        url: updateHospitalContact,
        data: this.info.infoFormData
      })
        .then(res => {
          if (res.data.payload) {
            this.$message({ type: 'success', message: '修改成功!' })
            this.dialogVisible = false
            this.getInfoDetail()
          }
        })
        .catch(() => {})
    },
    dialogSubmit () {
      this.$refs['infoForm'].validate(valid => {
        if (valid) {
          this.editHospitalInfo()
        } else {
          return false
        }
      })
    },
    beforeUpload (file) {
      let FileExt = file.name.replace(/.+\./, '') // 名字后缀
      const isLt1M = file.size / 1024 / 1024 < 1 // 文件大小
      const format = this.load.uploadAccept.includes(FileExt.toLowerCase())
      if (!format) {
        this.$message.error(`上传文件只支持${this.load.uploadAccept}类型!`)
      } else if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!')
      }
      return isLt1M && format
    },
    handleUpload (data) {
      this.isLoading = true
      // 发起请求
      let fd = new FormData()
      fd.append('file', data.file)
      this.$axios({
        method: 'post',
        url: this.load.uploadApi,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      })
        .then(res => {
          const { code, payload } = res.data
          if (code === '0') {
            this.$message({ type: 'success', message: '上传成功' })
            this.info.infoFormData.noticeUrl = payload
          } else {
            this.$message({ type: 'error', message: res.data.msg })
          }
        })
        .catch(() => {
          this.$message({ type: 'error', message: '文件上传失败，请重新选择' })
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    _initGlobalBtn () {
      let obj = {
        type: 'btn',
        arr: [
          { type: 'primary', noReturn: true, val: '修改', handle: this.editInfo }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    }
  },
  mounted () {
    this._initGlobalBtn()
    this.getInfoDetail()
  }
}
</script>
<style lang="less">
@import '~@assets/var.less';

.distribute-invite {
  .info-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: @defaultFontColor;
    border-bottom: @defaultBorder;
  }

  .pdf-corver {
    .pdf-logo {
      font-size: 50px;
    }

    p {
      color: #2371c5;
      margin: 0;
      line-height: 16px;
    }
  }

  .copy-btn {
    margin-top: 10px;
  }

  .look-notice {
    color: #2371c5;

    &:hover {
      cursor: pointer;
    }
  }

  .row-split {
    margin: 20px 0;
  }

  .invite-path {
    width: 50%;
    position: relative;
    top: 30%;
    transform: translate(50%, -50%);
  }

  .invite-path-info {
    color: #d85365;
    margin-top: 10px;
  }

  .input-limit {
    width: 211px;
  }

  .textarea-limit > textarea {
    resize: none !important;
  }

  .p-warning {
    min-width: 100px;
    text-align: left;
    color: #2371c5;
  }
}
</style>
